在前面的文章中介紹了Promise，與本篇的主角async、await息息相關，可以說是結合了兩種辦法讓我們在處理非同步事件時更加得心應手，讓我們先來了解async與await八。

Await等待

當今天建構了一個promise函式，透過.then()會抓取resolve的結果進行回傳，而當今天有兩個函式有先後順序，前一個需要執行完後才能執行第二個時，就可以使用await去等待，等待宣告await這個函式做完時，才往後執行，讓我們來看一個Promise的例子。

let runPromise = (someone, timer, success = true) => {
  return new Promise((resolve, reject) => {
    if (success) {
      setTimeout(function () {
        resolve(`${someone} 跑 ${timer / 1000} 秒時間(fulfilled)`);
      }, timer);
    } else {
      // 失敗
      reject(`${someone} 跌倒失敗(rejected)`)
    }
  });
}

// 此段函式並不會影響其它函示的執行
runPromise('jason', 3000).then(someone => {
  console.log('jason', someone)
});
// 以下這段 console 會在 promise 結束前就執行
console.log('這裡執行了一段 console');

在這個例子中，我們沒有加上await等待，所以呼叫函式runPromise()時，在等待的同時，下面的console.log已經執行完畢了。
加上await以後，就代表必須執行完這個函式後，才能再往下執行。

let jasonRun = await runPromise('jason', 2000)
console.log('跑完了:', mingRun);
let dinaRun = await runPromise('dina', 2500);
console.log('跑完了:', dinaRun);

所以這段函示會等jason跑完後，才讓dina去跑，就像接力的概念一樣，必須等待前者做完，後者此時暫停，前者做完以後，後者才開始。

當然我們可以利用**Promise.all()**同時進行。

let allRun = await Promise.all([runPromise('jason', 3000), runPromise('dina', 2500)]);
console.log(allRun);

jason與dina同時起跑，jason三秒後抵達，dina在2.5秒後抵達。

Async非同步

非同步就像創建了一個簡單的promise，更加白話易懂，能將await包在async裡面，被宣告為await的函式一樣按造上面的規則依序執行，而async與promise十分類似，可以透過.then()接受成功後的回傳結果。

const asyncRun = async () => {
  let jasonRun = await runPromise('jason', 2000);
  let dinaRun = await runPromise('dina', 2500);
  return `${jasonRun}, ${dinaRun}`
}
asyncRun().then(string => {
  console.log(string)
}).catch(response => {
  console.log(string)
})

上述的例子與上面相同，等待jasonRun結果出來後，再進行dinaRun，最後將結果return回傳，並且使用方法.then()接受成功參數，.catch()接受失敗參數。

失敗.catch()

const asyncRunFail = async () => {
  let jasonRun = await runPromise('jason', 2000, false);
  let dinaRun = await runPromise('dina', 2500);
  return `${jasonRun}, ${dinaRun}`
}
asyncRunFail().then(string => {
  console.log(string);
}).catch(response => {
  console.log(response);
  //jason失敗，(rejected)
})

.catch()跳到失敗時動作，接受rejected。

參考資料:https://www.casper.tw/javascript/2017/12/30/javascript-async-await/

那今天的介紹就到這邊了，謝謝大家。明天再一起努力吧!